import { computed } from 'vue';
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
import { useThemeStore } from '@/store';

export function useBasicLayout() {
	const themeStore = useThemeStore();
	const breakpoints = useBreakpoints(breakpointsTailwind);

	const mode = computed(() => {
		const vertical = 'vertical';
		const horizontal = 'horizontal';
		return themeStore.layout.mode.includes(vertical) ? vertical : horizontal;
	});

	const isMobile = breakpoints.smaller('sm');

	const layoutHeaderProps = {
		vertical: {
			showLogo: false,
			showHeaderMenu: false,
			showMenuCollapse: true,
		},
		'vertical-mix': {
			showLogo: false,
			showHeaderMenu: false,
			showMenuCollapse: false,
		},
		horizontal: {
			showLogo: true,
			showHeaderMenu: true,
			showMenuCollapse: false,
		},
		'horizontal-mix': {
			showLogo: true,
			showHeaderMenu: false,
			showMenuCollapse: true,
		},
	};

	const headerProps = computed(() => layoutHeaderProps[themeStore.layout.mode]);

	const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');

	return {
		mode,
		isMobile,
		headerProps,
		siderVisible,
	};
}
